import { useEffect, useState } from 'react'
import { Tabs } from 'antd-mobile'
import { List, Image, InfiniteScroll } from 'antd-mobile'
import axios from 'axios'
// 2.自定义一个函数式组件
function App() {
  const [count, setCount] = useState(1)
  const [data, setData] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const [active, setActive] = useState([4,4,1,1,1,2,2,2,2,3])

  // 5.图片中列表数据通过循环渲染
  const getData = async () => {
    let res=await axios.get('/api/room/list',{
      params:{
        pageCode:count,
        pageSize:10
      }
    })
    let arr=res.data.data.list
    setData([...data,...arr])
    setHasMore(arr.length>0)
    setCount(count+1)
  }

  // 7.定义函数简单实现去重效果并排序
  const getSort=(arr)=>{
    return Array.from(new Set(arr)).sort((a,b)=>a-b)
  }

  useEffect(() => {
    // 8.正确实现函数调用且给出函数返回值的类型
    setActive(getSort(active))
    
  },[])

  return (
    <>
    {/* 4.还原图片排版 */}
      <Tabs>
          <Tabs.Tab title='水果' key='fruits'>
          <List>
            {data.map((item, index) => (
              <List.Item key={item.id + index}
              prefix={
                <Image
                  src={item.url}
                  style={{ borderRadius: 20 }}
                  fit='cover'
                  width={40}
                  height={40}
                />
              }
              description={item.title}
              >{item.person}</List.Item>
            ))}
          </List>
          <InfiniteScroll loadMore={getData} hasMore={hasMore} />
          </Tabs.Tab>
          <Tabs.Tab title='蔬菜' key='vegetables'>
          {/* 7.定义函数简单实现去重效果并排序
           */}
           <h3>定义函数简单实现去重效果并排序</h3>
           <h3>原数据：[4,4,1,1,1,2,2,2,2,3]</h3>
           <h3>排序后：{active}</h3>
      
          </Tabs.Tab>
        </Tabs>
        {/* 6.点击火车、中转实现对应列表的切换 */}
    </>
  )
}

export default App
